<template>
	<view>
		<view class="box-title">
			<view class="box-t-head">
				<text class="box-t-head-l">活期精选</text>
				<text class="box-t-head-r">超900,000 + 人购买</text>
			</view>
			<view class="box-content">
				<text>收益稳健，轻松理财；申述灵活，使用方便；严控风险，省心之选；精品热销，先到先得。</text>
			</view>
		</view>
		<!-- <swiper></swiper> -->
		<view class="dong_wapper">
		
			<view class="container">
		
				<view class="swiper-item">
		
					<view class="swiper_scroll_box" v-for="(item,index) in currentFinancial" :key="item.id">
						<view class="swiper_scroll_box_content">
							<view class="swiper_scroll_box_conten_head">{{item.name}}<view class="t"
									v-if="item.description">{{item.description}}</view></view>
							<view class="swiper_scroll_box_content_num">
								<view class="swiper_scroll_box_content_num_l">
									<text class="swiper_scroll_box_content_num_l_t1">{{(item.yieldrate * 100).toPrecision(3)}}0%</text>
									<text class="swiper_scroll_box_content_num_l_t2">\n每期反息收益率</text>
								</view>
								<view class="swiper_scroll_box_content_num_r">
									<text class="swiper_scroll_box_content_num_l_t3">{{item.date}}</text>
									<text class="swiper_scroll_box_content_num_l_t4">\n{{item.startmoney}}起购</text>
								</view>
								<button type="default" class="swiper_scroll_box_content_num_btn" @tap="goDetail(item.id)">一键购买</button>
							</view>
						</view>
		
					</view>
					<view class="swiper_scroll_txt1"><text>没有找到合适的产品？去逛逛基金吧</text></view>
		
				</view>
		
			</view>
		</view>
	</view>
</template> <script>

// import swiper from '@/components/currentFinancial/swiper_currentFinancial.vue'
import {createNamespacedHelpers} from "vuex"
const {mapState,mapMutations,mapActions} = createNamespacedHelpers("products")
export default {
// components:{
// swiper
// },
	data() {
			return {


				interval_data: [{
						_id: 1,
						name: "平安活期盈",
						rate: "2.32%",
						date: "活期",
						money: "先到先得",
						num: 1,
						type: ""
					},
					{
						_id: 2,
						name: "共享太平天天",
						rate: "2.37%",
						date: "活期",
						money: "1000元起购",
						num: 1,
						type: ""
					}, {
						_id: 3,
						name: "国海金贝壳",
						rate: "2.37%",
						date: "活期",
						money: "5000元起购",
						num: 1,
						type: "申赎灵活"
					}, {
						_id: 4,
						name: "共享太平天天",
						rate: "2.37%",
						date: "活期",
						money: "1000元起购",
						num: 1,
						type: "长期优选"
					}, {
						_id: 5,
						name: "共享太平天天",
						rate: "2.37%",
						date: "活期",
						money: "1000元起购",
						num: 1,
						type: "申赎灵活"
					}

				]

			}
		},
		computed: {
			newdata() {
				return [
					this.interval_data,

				]
			},
			...mapState(["currentFinancial"])
		},
		onLoad(){
			this.getRegularIntervals({type:"1"})
			console.log(this.currentFinancial)
		},
		methods: {
			...mapActions(["getRegularIntervals"]),
				//一键购买跳转
				goDetail(id){
					console.log(id,"获取id")
					uni.navigateTo({
						url:"/pagesD/gold-detail/gold-detail?_id="+id
					})
				}
		}
}
</script>

<style scoped lang="scss">
	.box-title {
		margin-top: 40rpx;
		margin-bottom: 20rpx;

		.box-t-head {
			box-sizing: border-box;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;

			.box-t-head-l {
				width: 128rpx;
				height: 44rpx;
				font-family: PingFang SC;
				font-size: 32rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 44rpx;
				letter-spacing: 0rpx;
				color: #323232;
				vertical-align: middle;
			}

			.box-t-head-r {

				font-size: 20rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 28rpx;
				letter-spacing: 0rpx;
				color: #161616;
				margin-top: 10rpx;
			}

		}

		.box-content {
			width: 670rpx;
			// height: 68rpx;
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 34rpx;
			letter-spacing: 0rpx;
			color: #474747;
			opacity: 0.7;
			margin: 16rpx auto;
			border-bottom: 1px solid  #E0E0E0;
			padding-bottom: 12rpx;
		}
	}
	
	.dong_wapper {
		.wapper_li {
			box-sizing: border-box;
			padding: 10rpx 40rpx;
			display: flex;
			justify-content: space-between;
			width: 600rpx;
	
			.btn {
				height: 52rpx;
				color: #9a9a9a;
				border-radius: 12rpx;
				box-sizing: border-box;
				padding: 0rpx 20rpx;
	
				.btn-text {
					height: 34rpx;
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 24rpx;
					letter-spacing: 0rpx;
	
				}
	
			}
	
			.active {
				background-color: #007aff;
				color: #ffffff;
			}
		}
	}
	
	.container {
	
		.swiper-item {
			height: 100%;
	
	
			.swiper_scroll_txt1 {
				width: 320rpx;
				height: 28rpx;
				font-size: 20rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 28rpx;
				letter-spacing: 0rpx;
				color: #9a9a9a;
				text-align: center;
				margin: 0 auto;
			}
	
			.swiper_scroll_box {
				box-sizing: border-box;
				padding: 40rpx;
	
				.swiper_scroll_box_content {
					// height: 300rpx;
					border-bottom: 1px solid #F0F0F0;
					padding-bottom: 20rpx;
	
					.swiper_scroll_box_conten_head {
						// width: 542rpx;
						height: 44rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #323232;
						display: flex;
						align-items: center;
						.t {
							text-align: center;
							width: 108rpx;
							height: 36rpx;
							background-color: #ffd9d9;
							border-radius: 18rpx;
							font-size: 20rpx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 44rpx;
							letter-spacing: 0rpx;
							color: #fd1515;
							margin-left: 30rpx;
						}
					}
	
					.swiper_scroll_box_content_num {
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 34rpx;
						letter-spacing: 0rpx;
						color: #9a9a9a;
						margin-top: 20rpx;
						width: 670rpx;
	
						.swiper_scroll_box_content_num_btn {
							width: 128rpx;
							height: 36rpx;
							background-color: #007aff;
							border-radius: 18rpx;
							font-size: 20rpx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 36rpx;
							letter-spacing: 0rpx;
							color: #ffffff;
							padding: 0;
						}
	
						.swiper_scroll_box_content_num_l {
	
							.swiper_scroll_box_content_num_l_t1 {
								width: 120rpx;
								height: 48rpx;
								font-family: DIN;
								font-size: 40rpx;
								font-weight: normal;
								font-stretch: normal;
								line-height: 44rpx;
								letter-spacing: 0rpx;
								color: #ff1d1d;
							}
	
							.swiper_scroll_box_content_num_l_t2 {
								width: 168rpx;
								height: 34rpx;
								font-family: PingFang SC;
								font-size: 24rpx;
								font-weight: normal;
								font-stretch: normal;
								line-height: 34rpx;
								letter-spacing: 0rpx;
								color: #9a9a9a;
							}
						}
	
						.swiper_scroll_box_content_num_r {
							margin-left: 96rpx;
	
							.swiper_scroll_box_content_num_l_t3 {
								width: 104rpx;
								height: 44rpx;
								font-size: 32rpx;
								font-weight: normal;
								font-stretch: normal;
								line-height: 44rpx;
								letter-spacing: 0rpx;
								color: #2d2d2d;
							}
	
							.swiper_scroll_box_content_num_l_t4 {
								// width: 168rpx;
								height: 34rpx;
								font-size: 24rpx;
								font-weight: normal;
								font-stretch: normal;
								line-height: 34rpx;
								letter-spacing: 0rpx;
								color: #9a9a9a;
							}
						}
					}
				}
	
	
			}
		}
	}
</style>
